// 电子围栏
<template>
  <div class="fence-container">
    <a-form class="controls" layout="inline">
      <a-form-item>
        <a-button-group>
          <template v-if="drawer.mode === 'none'">
            <a-button @click="drawer.mode = 'polygon'">多边形</a-button>
            <a-button @click="drawer.mode = 'rectangle'">矩形</a-button>
            <a-button @click="drawer.mode = 'circle'">圆形</a-button>
          </template>
          <template v-else>
            <a-button @click="drawer.mode = 'none'">取消</a-button>
          </template>
        </a-button-group>
      </a-form-item>
    </a-form>
    <a-form class="info" layout="inline">
      <a-form-item label="面积" v-show="area > 0"
        >{{ (area / 1000000).toFixed(4) }}平方公里</a-form-item
      >
      <a-form-item>
        <a-button size="small" shape="circle" icon="copy" @click="showModal" />
      </a-form-item>
      <a-form-item label="卫星图">
        <a-switch v-model="satellite" />
      </a-form-item>
    </a-form>

    <amap async :center.sync="center" :zoom.sync="zoom">
      <amap-satellite-layer :visible="satellite" />
      <amap-scale />
      <amap-marker v-if="position" :position.sync="position" />
      <amap-mouse-tool
        :mode.sync="drawer.mode"
        clear-when-close
        @draw="onDraw"
      />
      <amap-polygon
        v-if="drawer.polygon"
        :path.sync="drawer.polygon"
        :fill-color="styles.fill"
        :stroke-color="styles.stroke"
        :fill-opacity="0.5"
        editable
      />
      <amap-circle
        v-if="drawer.circle"
        :center.sync="drawer.circle.center"
        :radius.sync="drawer.circle.radius"
        :fill-color="styles.fill"
        :stroke-color="styles.stroke"
        :fill-opacity="0.5"
        editable
      />
      <amap-rectangle
        v-if="drawer.rectangle"
        :bounds.sync="drawer.rectangle"
        :fill-color="styles.fill"
        :stroke-color="styles.stroke"
        :fill-opacity="0.5"
        editable
      />
    </amap>
  </div>
</template>

<script>
import {
  Amap,
  Marker,
  Scale,
  MouseTool,
  Polygon,
  Circle,
  Rectangle,
  SatelliteLayer,
} from "@amap/amap-vue";

function makeBounds(value) {
  const sw = new window.AMap.LngLat(value[0][0], value[0][1]);
  const ne = new window.AMap.LngLat(value[1][0], value[1][1]);
  return new window.AMap.Bounds(sw, ne);
}

export default {
  components: {
    Amap,
    AmapMarker: Marker,
    AmapScale: Scale,
    AmapMouseTool: MouseTool,
    AmapPolygon: Polygon,
    AmapCircle: Circle,
    AmapRectangle: Rectangle,
    AmapSatelliteLayer: SatelliteLayer,
  },
  data() {
    return {
      center: [113.889882, 22.940744],
      position: [113.889882, 22.940744],
      zoom: 15,
      ready: false,
      styles: {
        fill: "#409EFF",
        stroke: "#000A58",
      },
      satellite: false,
      drawer: {
        type: "none",
        mode: "none",
        polygon: [],
        circle: {},
        rectangle: null,
      },
    };
  },
  computed: {
    area() {
      const { ready, drawer } = this;
      if (!ready) return 0;
      switch (drawer.type) {
        case "none":
          return 0;
        case "polygon":
          return window.AMap.GeometryUtil.ringArea(drawer.polygon);
        case "rectangle":
          return new window.AMap.Rectangle({
            bounds: makeBounds(drawer.rectangle),
          }).getArea();
        case "circle":
          return Math.PI * Math.pow(drawer.circle.radius, 2);
        default:
          return 0;
      }
    },
  },
  methods: {
    onDraw(type, res) {
      this.drawer.type = type;
      this.drawer[type] = res;
      this.drawer.mode = "none";
    },
    showModal() {
      const h = this.$createElement;
      this.$success({
        title: "当前圈选的范围",
        content: h("a-textarea", {
          attrs: {
            style: "height: 400px; font-family: monospace;",
          },
          props: {
            value: JSON.stringify(this.drawer[this.drawer.type], null, "  "),
          },
        }),
      });
    },
  },
  watch: {
    "drawer.mode"(mode) {
      console.log("drawer.mode", mode);
      if (mode !== "none") {
        const { drawer } = this;
        drawer.type = "none";
        drawer.polygon = null;
        drawer.circle = null;
        drawer.rectangle = null;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fence-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.controls {
  position: absolute;
  left: 6px;
  top: 0;
  z-index: 9999;
}
.info {
  position: absolute;
  right: 6px;
  top: 0;
  z-index: 9999;
}
</style>
